<!-- 薪酬-基础设置-新增工资表模板-设置工资项-设置薪酬结构 -->
<template>
  <pageHeaderNew :title="title" showBack></pageHeaderNew>
  <article class="wrap">
    <header>
      <span
        >您可以选择系统已有工资项，也可以进行自定义新增（自定义工资项点击右侧编辑按钮即可删除）
        <a-button type="text">编辑</a-button>
      </span>
    </header>
    <main>
      <a-collapse
        :default-active-key="['1']"
        expand-icon-position="right"
        :bordered="false"
      >
        <a-collapse-item key="1">
          <template #header>
            <header>
              <h2>基本工资</h2>
            </header>
          </template>
          <a-space>
            <a-checkbox-group :default-value="[1]">
              <template v-for="item in 2" :key="item">
                <a-checkbox :value="item">
                  <template #checkbox="{ checked }">
                    <a-space
                      align="start"
                      class="custom-checkbox-card"
                      :class="{ 'custom-checkbox-card-checked': checked }"
                    >
                      <div class="aaaa" style="position: relative">
                        <div className="custom-checkbox-card-title">
                          Checkbox Card {{ item }}
                        </div>
                        <div class="imgg" v-show="checked">
                          <img src="/public/u480878.png" />
                          <img src="/public/gouzi.png" />
                        </div>
                      </div>
                    </a-space>
                  </template>
                </a-checkbox>
              </template>
            </a-checkbox-group>
            <a-button class="customBtn">+自定义工资项</a-button>
          </a-space>
        </a-collapse-item>
      </a-collapse>
    </main>
    <footer>
      <a-button
        class="btn"
        style="
          margin-right: 20px;
          border: 1px rgba(242, 242, 242, 1) solid;
          background-color: #fff;
        "
        @click="$router.go(-1)"
        >返回</a-button
      >
      <a-button class="btn" type="primary" @click="save">保存</a-button>
    </footer>
  </article>
</template>

<script lang="ts" setup>
const title = '设置薪酬结构';
</script>

<style lang="less" scoped>
.wrap {
  padding: 10px 20px;
  header {
    span::before {
      content: '*';
      color: red;
    }
  }
  main {
    margin-bottom: 60px;
    overflow: hidden;

    header {
      h2 {
        display: flex;
        align-items: center;
        &::before {
          content: '';
          display: inline-block;
          width: 7px;
          height: 30px;
          background-color: #165dff;
          margin-right: 10px;
        }
      }
    }
    .custom-checkbox-card-mask-dot {
      width: 8px;
      height: 8px;
      border-radius: 2px;
    }

    .custom-checkbox-card-title {
      color: var(--color-text-1);
      font-size: 14px;
      color: #ccc;
      border-color: rgba(228, 228, 228, 1);
      font-weight: bold;
    }
    .custom-checkbox-card {
      padding: 10px 16px;
      border: 1px solid var(--color-border-2);
      border-radius: 4px;
      box-sizing: border-box;
    }

    .custom-checkbox-card-mask {
      height: 14px;
      width: 14px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 2px;
      border: 1px solid var(--color-border-2);
      box-sizing: border-box;
    }
    .custom-checkbox-card:hover,
    .custom-checkbox-card-checked,
    .custom-checkbox-card:hover .custom-checkbox-card-mask,
    .custom-checkbox-card-checked .custom-checkbox-card-mask {
      border-color: rgb(var(--primary-6));
    }

    .custom-checkbox-card:hover .custom-checkbox-card-title,
    .custom-checkbox-card-checked .custom-checkbox-card-title {
      color: rgb(var(--primary-6));
    }

    .custom-checkbox-card-checked .custom-checkbox-card-mask-dot {
      background-color: rgb(var(--primary-6));
    }

    .customBtn {
      height: 44px;
      background-color: #fff;
      border: 1px solid rgba(228, 228, 228, 1);
    }

    .imgg {
      position: absolute;
      right: -16px;
      top: 10px;
      img:nth-child(2) {
        position: absolute;
        top: 13px;
        left: 10px;
      }
    }
    //   .imgg{
    //     position: absolute;
    //     left: 20px;
    //     background-color: gold;
    //   }
  }

  footer {
    height: 60px;
    width: calc(100% - 100px);
    background-color: #fff;
    box-shadow: 1px -1px 10px 0 #cacaca;
    position: fixed;
    bottom: 0;
    left: 10%;
    display: flex;
    justify-content: center;
    align-items: center;

    .btn {
      width: 120px;
      height: 40px;
      border-radius: 5px;
    }
  }
}
:deep(.arco-collapse-item-content) {
  background-color: #fff;
}
</style>
